<template>
  <div>
    <div style="text-align:left;padding:10px 0;">
      <Button type="primary" size="small" @click="addUserFun">新增</Button>
    </div>
    <Table :columns="columns1" :data="data1">
      <template slot-scope="{ row }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="showModel(row)">修改</Button>
        <Button
          v-if="row.state == 0"
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="remove(row, 1)"
        >启用</Button>
        <Button v-if="row.state == 1" type="error" size="small" @click="remove(row, 0)">停用</Button>
      </template>
    </Table>
    <Modal v-model="modalShow" :footer-hide="true" :title="title">
      <div style="padding-right: 40px;">
        <Form :model="formItem" :label-width="80">
          <!-- <FormItem label="Id">
              <Input v-model="formItem.id" placeholder="ID" />
          </FormItem>-->
          <FormItem label="用户名">
            <Input v-model="formItem.userName" placeholder="名称" />
          </FormItem>
          <FormItem label="密码">
            <Input v-model="formItem.password" placeholder="密码" />
          </FormItem>
          <FormItem style="text-align:right">
            <Button style="margin-right:5px" type="primary" @click="cancelFun()">取消</Button>
            <Button type="primary" @click="submitFun()">确认</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getUsers, addUser, updateUser } from '@/api/user'

export default {
  name: 'home',
  components: {
    // HelloWorld
  },
  data () {
    return {
      title: '新增用户',
      modalShow: false,
      columns1: [
        // {
        //   title: 'ID',
        //   key: 'id'
        // },
        {
          title: '名称',
          key: 'userName'
        },
        {
          title: '日期',
          key: 'dateline'
        },
        {
          title: '状态',
          key: 'state',
          render: (h, params) => {
            return h('span', params.row.state === 1 ? '启用' : '停用')
          }
        },
        {
          title: '操作',
          minWidth: 130,
          slot: 'action',
          align: 'center'
        }
      ],
      data1: [],
      formItem: {
        id: '',
        userName: ''
      }
    }
  },
  methods: {
    cancelFun () {
      this.modalShow = false
    },
    submitFun () {
      if (this.title === '新增用户') {
        addUser(this.formItem).then(res => {
          if (res.code === 1) {
            this.modalShow = false
            this.$Message.success('新增成功！')
            this.queryData()
          } else {
            this.$Message.error('新增失败！')
          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        updateUser(this.formItem).then(res => {
          if (res.code === 1) {
            this.modalShow = false
            this.$Message.success('修改成功！')
            this.queryData()
          } else {
            this.$Message.error('修改失败！')
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    hrefFun () {
      this.$router.push({
        name: 'about'
      })
    },
    queryData () {
      getUsers({

      }).then(res => {
        if (res.code === 1) {
          this.data1 = res.data
        } else {
          this.data1 = []
        }
      }).catch(err => {
        console.log(err)
      })
    },
    addUserFun () {
      this.title = '新增用户'
      this.modalShow = true
      this.formItem = {}
    },
    showModel (row) {
      this.title = '修改用户'
      this.formItem = row
      this.modalShow = true
    },
    remove (row, type) {
      updateUser({
        id: row.id,
        state: type
      }).then(res => {
        if (res.code === 1) {
          this.queryData()
        }
      }).catch(err => {
        console.log(err)
      })
    }

  },
  mounted () {
    this.queryData()
  }
}
</script>
